<template>
  <div>
    <my-header></my-header>
    <div class="top">
      <div class="title">
        <h5
          :class="[
            { car1: lists.good === true },
            { car2: lists.top === true },
            { 'topiclist-tab': lists.good !== true && lists.top !== true },
          ]"
        >
          {{ lists | tabTtem }}
        </h5>
        <span>{{ lists.title }}</span>
        <ul>
          <li>作者{{ lists.author.loginname }}</li>
          <li>{{ lists.visit_count }}次浏览</li>
          <li>来自{{ lists.tab }}</li>
        </ul>
      </div>
      <div v-html="lists.content"></div>
    </div>
  </div>
</template>

<script>
import axios from "axios";
import myHeader from "../components/myHeader.vue";
export default {
  data() {
    return {
      lists: [],
    };
  },
  methods: {
    toList() {
      axios
        .get(`https://cnodejs.org/api/v1/topic/${this.$route.params.id}`)
        .then((res) => {
          console.log(res);
          this.lists = res.data.data;
        });
    },
  },
  filters: {
    tabTtem(item) {
      if (item.good == true) {
        return "精华";
      } else if (item.top == true) {
        return "置顶";
      } else if (item.tab == "ask") {
        return "问答";
      } else if (item.tab == "share") {
        return "分享";
      } else {
        return "招聘";
      }
    },
    formDate(str) {
      if (!str) return "";
      var date = new Date(str);
      var time = new Date().getTime() - date.getTime(); //现在时间-传入时间=相差时间
      if (time < 0) {
        return "";
      } else if (time / 1000 < 30) {
        return "刚刚";
      } else if (time / 1000 < 60) {
        return parseInt(time / 1000) + "秒前";
      } else if (time / 60000 < 60) {
        return parseInt(time / 60000) + "分钟前";
      } else if (time / 3600000 < 24) {
        return parseInt(time / 3600000) + "个小时前";
      } else if (time / 86400000 < 31) {
        return parseInt(time / 84600000) + "天前";
      } else if (time / 2592000000 < 12) {
        return parseInt(time / 2592000000) + "个月前";
      } else {
        return parseInt(time / 31536000000) + "年前";
      }
    },
  },
  created() {
    this.toList();
  },
  mounted() {},
  components: {
    myHeader,
  },
  computed: {},
  watch: {},
};
</script>

<style lang='stylus' scoped>
.title{
    width: 7.304rem;
  background-color: #fff;
  margin: auto;
  margin-top: 0.4rem;
  border-right: 0.3rem;
}
.car1, .car2 {
  background: #80bd01;
  padding: 0.04rem 0.08rem;
  border-radius: 0.06rem;
  color: #fff;
  font-size: 0.24rem;
  margin-right: 0.2rem;
  width 80px
}</style>

